<!--  -->
<template>
    <div id="container">
        <div ref="chart" id="main"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    components: {},
    data() {
        return {
            chart: null
        }
    },
    props: {
        chartData: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        chartData: {
            handler(newVal) {
                if (newVal && this.chart) {
                    this.drawChart()
                }
            },
            immediate: true,
            deep: true
        }
    },
    computed: {},
    created() {
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.chart);
        if (this.chart) {
            this.chart.dispose();
        }
    },
    mounted() {
        if (!this.chart) {
            this.chart = echarts.init(this.$refs.chart)
            window.addEventListener('resize', this.handleResize);
        }
        // this.drawChart()
    },
    methods: {
        handleResize() {
            if (this.chart) {
                this.chart.resize();
            }
        },
        drawChart() {
            var myChart = this.chart
            const chartData = this.chartData
            const z_data = chartData.map(item => [item.tm, item.z])
            const q_data = chartData.map(item => [item.tm, item.q])
            const zyMin = Math.floor(Math.min(...chartData.map(item => item.z)))
            const zyMax = Math.ceil(Math.max(...chartData.map(item => item.z)))
            const qyMin = Math.floor(Math.min(...chartData.map(item => item.q)))
            const qyMax = Math.ceil(Math.max(...chartData.map(item => item.q)))

            var option = {
                title: {
                    text: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false
                    }
                },
                legend: {
                    // 开启图例
                    show: false,
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            color: '#B2B8C3'
                        },
                        axisLine: {
                            onZero: true,
                            lineStyle: {
                                color: '#B2B8C3'
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        name: '水位(m)',
                        type: 'value',
                        axisLabel: {
                            color: '#B2B8C3'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#B2B8C3'
                            }
                        },
                        axisTick: {
                            show: false // 隐藏刻度线
                        },
                        splitLine: {  // y轴网格线
                            show: true,
                            lineStyle: {
                                type: 'dashed',    // 虚线类型
                                color: '#666666',  // 线条颜色
                                width: 0.5,          // 线条宽度
                                dashOffset: 2      // 虚线偏移量
                            }
                        },
                        axisLabel: {
                            show: true,
                            // textStyle: {
                            //   color: '#fff'
                            // },
                            margin: 13  // 减小标签与轴的距离
                        },
                        min: zyMin,
                        max: zyMax
                    },
                    {
                        name: '流量(m³/s)',
                        type: 'value',
                        axisLabel: {
                            color: '#B2B8C3'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#B2B8C3'
                            }
                        },
                        axisTick: {
                            show: false // 隐藏刻度线
                        },
                        splitLine: {  // y轴网格线
                            show: true,
                            lineStyle: {
                                type: 'dashed',    // 虚线类型
                                color: '#666666',  // 线条颜色
                                width: 0.5,          // 线条宽度
                                dashOffset: 2      // 虚线偏移量
                            }
                        },
                        axisLabel: {
                            show: true,
                            // textStyle: {
                            //   color: '#fff'
                            // },
                            margin: 13  // 减小标签与轴的距离
                        },
                        min: qyMin,
                        max: qyMax
                    },
                ],
                series: [
                    {
                        name: '水位',
                        type: 'line',
                        data: z_data,
                        yAxisIndex: 0
                    }, {
                        name: '流量',
                        type: 'line',
                        data: q_data,
                        yAxisIndex: 1
                    }
                ]
            };

            myChart.setOption(option);

        },


    },
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式
#container {
    position: relative;
    /* 添加相对定位 */
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#main {
    width: 100%;
    height: 100%;
}
</style>